<template>
    <wrap oneScreen title="白条申请">
      <div slot="page">
        <div class='fill-box flex flex-v light-bg' :style="isApp?'top:0':'top:44px'">
          <div class="bg">
            <div class="mask readme">
              <h3>关于九机白条</h3>
              <span class="label font-15">九机白条是九机网旗下推出的什么什么什么什么什么什么什么什么什么什么什么什</span>
            </div>
            <div class="mask recoment">
                <span class="label font-15">店员推荐办理</span>
                <router-link class="fill-recoment grey-9" :to="'/fill/recommend'">               
                  {{recommendStaffNum?recommendStaffNum:'获取推荐码'}}
                  <i class="fa fa-angle-right fa-lg"></i> 
                </router-link>
            </div>
          </div>
          <div class="fill-btn-box flex">
            <a class="light-bg" @click="saveTypeCode(1)">
              <span class="font-18">社会人士申请</span>
            </a>
            <a class="light-bg" @click="saveTypeCode(2)">
              <span class="font-18" >学生用户申请</span>
            </a>
          </div>
        </div>
      </div>
    </wrap>
  </template>
  <script>
    import wrap from '../../components/wrap.vue'
    export default {
      components: {wrap},
      data () {
        return {
          typeCode: 0,
          isApp: false,
          recommend: '',
          recommendStaffNum: ''
        }
      },
      created () {
        const self = this
        self.isApp = self.$store.state.inAPP
        if (self.$route.query.recommend) {
          self.recommendStaffNum = self.$route.query.recommend
        }
        self.fetchData()
      },
      methods: {
        fetchData () {
          const self = this
          self.$api.fill.getApplyType().then(res => {
            if (res.code === 0) {
              let data = res.data
              // self.recommend = data.recommendFlag ? data.recommendStaff : self.$route.query.recommend
              self.recommendStaffNum = self.$route.query.recommend ? self.$route.query.recommend : data.recommendStaffNum
            } else {
              self.$Toast(res.userMsg ? res.userMsg : res.msg)
            }
          })
        },
        saveTypeCode (type) {
          let self = this
          self.typeCode = type
          this.$cookie.set('typeCode', self.typeCode)
          self.$router.push('/fill/basic/?recommendStaffNum=' + self.recommendStaffNum + '&typeCode=' + self.typeCode)
        }
      }
    }
  </script>
  <style scoped>
    .fill-box{
      position: absolute;
      bottom: 0px;
    }
    .bg{
      width: 10rem;
      height: 100%;
      background: url(../../assets/images/bg.png) no-repeat;
      background-size: cover;
      position: relative;
    }
    .fill-box img {width:10rem}
    .content{    
      height: 40px;
      line-height: 40px;
      font-size:16px;
      padding-left: 12px;
      display: flex;
    }
    .mask{
      width: 8rem;
      background: #efefef;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 0 10px;
      left: 50%;
      margin-left: -4rem;
    }
    .readme{
      position: absolute;
      bottom: 90px;
      padding: 10px;
      display: none;
    }
    .readme h3{
      text-align: center;
      line-height: 38px;
      font-size: 16px;
    }
    .readme span{
      padding: 10px;
      line-height: 25px;
    }
    .recoment{ 
      height: 50px;
      line-height: 50px;
      position: absolute;
      bottom: 20px;
    }
    .radio{
      flex: 0 0 auto;
    }
    .content i{margin-right:5px;color: #26a2ff}
    .fill-btn-box{
      height: 60px;
      flex: 0 0 auto;
      background: #fff;
    }
    .fill-btn-box a{
      flex: auto;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin: 15px 0;
    }
    .fill-recoment {
      float: right;
    }
    .fill-recoment .fa {
      float: right;
      color: #999;
      line-height: 50px;
      margin-left: 10px;
    }
    .fill-btn-box a:first-of-type{
      border-right: 1px solid #999;
    }
    .fill-btn{
      margin: 20px 10px;
      border-radius: 5px;
    }
    .recommendStaffNum{
      margin: 0 15px 0 5px;
      border:1px solid #bbb;
      border-radius: 5px;
      line-height: 30px;
      flex: auto;
      min-width: 165px;
    }
  </style>